<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="ex.css" />
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />

    <title>GALLERY</title>
    <link
      href="https://fonts.googleapis.com/css?family=Raleway:600,900"
      rel="stylesheet"
    />
  </head>
  <body id="body">
    <p class="subheading">
      <a href="index.html" class="hyper">Home</a>
      <a href="Blog/blog.html" class="hyper">Blog</a>
      <a href="About_Us/About_Us.html" class="hyper">About Us</a>
      <a href="Contact Us/contact_us.html" class="hyper">Contact Us</a>
    </p>
    <hr width="100%">
    <p class="heading">GALLERY</p>
    <div class="gallery-image">
      <div class="img-box">
        <img
        src="https://images.unsplash.com/photo-1527891751199-7225231a68dd?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTV8fGNvbGxlZ2UlMjBjYW1wdXN8ZW58MHx8MHx8&auto=format&fit=crop&w=400&q=60"
          id="campus"
          alt="clg campus"
        />
        <div class="transparent-box">
          <div class="caption">
            <p>IIIT L</p>
            <p class="opacity-low">Campus</p>
          </div>
        </div>
      </div>
      <div class="img-box">
        <img
          src="https://www.srecwarangal.ac.in/dance-club/dance-club-7.jpg"
          alt=""
        />
        <div class="transparent-box">
          <div class="caption">
            <p>Zephyr</p>
            <p class="opacity-low">Dance Club</p>
          </div>
        </div>
      </div>
      <div class="img-box">
        <img
          src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTwIx0tHf3XzxydgthJdecat0ywweP4vJbb2A&usqp=CAU"
          alt=""
        />
        <div class="transparent-box">
          <div class="caption">
            <p>Graduation</p>
            <p class="opacity-low">Ceremony</p>
          </div>
        </div>
      </div>
      <div class="img-box">
        <img src="https://iiitl.ac.in/pgdds1/assets/img/about.jpg" alt="" />
        <div class="transparent-box">
          <div class="caption">
            <p>Equinox</p>
            <p class="opacity-low">Tech Fest</p>
          </div>
        </div>
      </div>
      <div class="img-box">
        <img
          src="https://prajyotiniketan.edu.in/uchophee/2020/06/0906202004061810.jpg"
          id="Crotonia"
          alt=""
        />
        <div class="transparent-box">
          <div class="caption">
            <p>Crotonia</p>
            <p class="opacity-low">Literary Club</p>
          </div>
        </div>
      </div>
      <div class="img-box">
        <img
          src="https://tapinto-production.s3.amazonaws.com/uploads/articles/mu/best_crop_349992a360cc22406ac6_Musical_Club_2018_Scholarship_Winners.JPG?id=2339175"
          alt=""
        />
        <div class="transparent-box">
          <div class="caption">
            <p>Estrella</p>
            <p class="opacity-low">Music Club</p>
          </div>
        </div>
      </div>
      <div class="img-box">
        <img
          src="https://images.unsplash.com/photo-1606761568499-6d2451b23c66?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=774&q=80"
          alt=""
        />
        <div class="transparent-box">
          <div class="caption">
            <p>Study</p>
            <p class="opacity-low">Lecture Hall</p>
          </div>
        </div>
      </div>
      <div class="img-box">
        <img
          src="https://i.picsum.photos/id/1/5616/3744.jpg?hmac=kKHwwU8s46oNettHKwJ24qOlIAsWN9d2TtsXDoCWWsQ"
          alt=""
        />
        <div class="transparent-box">
          <div class="caption">
            <p>Facilities</p>
            <p class="opacity-low">Computer Lab</p>
          </div>
        </div>
      </div>
      <div class="img-box">
        <img
          src="https://images.unsplash.com/photo-1498243691581-b145c3f54a5a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80"
          id="library"
          alt=""
        />
        <div class="transparent-box">
          <div class="caption">
            <p>Facilities</p>
            <p class="opacity-low">Library</p>
          </div>
        </div>
      </div>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/darkmode-js@1.5.7/lib/darkmode-js.min.js"></script>
      <script>
        function addDarkmodeWidget() {
          const options = {
            bottom: '64px', // default: '32px'
            right: '32px', // default: '32px'
            left: 'unset', // default: 'unset'
            time: '0.5s', // default: '0.3s'
            mixColor: '#fff', // default: '#fff'
            backgroundColor: '#fff',  // default: '#fff'
            buttonColorDark: '#fff',  // default: '#100f2c'
            buttonColorLight: '#fff', // default: '#fff'
            saveInCookies: false, // default: true,
            label: '🌓', // default: ''
            autoMatchOsTheme: true // default: true
          }
          const darkmode = new Darkmode(options);
          darkmode.showWidget();
        }
        window.addEventListener('load', addDarkmodeWidget);
      </script>
    </script>
  </body>
</html>